<template>
	<view class="bg-white">
		<view class="flex flex-column u-p-t-30 u-p-x-30 ">
			<view class="flex-1">
				<view class="flex align-center">
					<image :src="specInfo.imgshow" style="width: 180rpx;height: 180rpx;" mode=""></image>
					<view class="flex flex-column u-m-l-30 u-p-t-10" style="height: 180rpx;">
						<view class="flex align-end">
							<text class="u-font-40 u-m-r-10 text-danger">¥</text>
							<text class="u-font-40 text-danger">{{specInfo.goods_price}}</text>
						</view>
						<text class="t-font-24 text-greey">库存{{specInfo.stock_num}}件</text>
						<!-- <text class="t-font-24 text-greey">已选 红色</text> -->
					</view>
				</view>
			</view>
			
			<view class="">
				<block v-for="(item,index) in attrList" :key="index">
					<!-- <goods-detail-sku-item :item="item" :index="index" @checkedID="checkedID"></goods-detail-sku-item> -->
					<view class="flex flex-column u-m-t-20">
						<text class="u-font-26 font-weight-bold">{{item.group_name}}</text>
						<view class="flex flex-wrap u-m-t-10">
							<block v-for="(v, i) in item.spec_items" :key="i">
								<view class="u-m-r-20 u-m-t-20 u-p-x-30 rounded-25" :class="[checkID == v.item_id?'active':'bgc']" @click="change(v.item_id,index)">
									<text class="u-font-24" :class="[checkID == v.item_id?'text-white':'text-dark']" style="height: 46rpx;line-height: 46rpx;">{{v.spec_value}}</text>
								</view> 
							</block>
						</view>
					</view>
				</block>
			</view>
			<view class="flex align-center justify-between u-p-y-30">
				<text class="u-font-26 font-weight-bold">数量</text>
				<view class="flex align-center " >
					<view class="btn-wrap btn-cut" @click="minus" style="width: 50rpx;height: 50rpx; line-height: 50rpx;"></view>
					<text class="u-m-x-20 u-font-16">{{buyNum}}</text>
					<view class="btn-wrap btn-add" @click="plus" style="width: 50rpx;height: 50rpx; line-height: 50rpx;"></view>
				</view>
			</view>
		</view>
		<view class="flex align-center justify-center" style="height: 76rpx;">
			<view class="flex-1 flex align-center justify-center" style="background-color: var(--mainColor); height: 76rpx" @click="$emit('addToCart', buyNum)">
				<text class="u-font-26 text-white">确定</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: 'goods-detail-skuPop',
		created(){
			uni.$on('clearCheckedId', ()=>{
				this.checkID = ''
			})
		},
		props: {
			details: {
				type: Object,
				default() {
					return {}
				}
			},
			specInfo: {
				type: Object,
				default() {
					return {}
				}
			},
			attrList: {
				type: Array,
				default() {
					return []
				}
			},
			checkedSkuId:{
				type: String,
				default() {
					return ''
				}
			}
		},
		data() {
			return {
				buyNum: 1,
				checkID: '',
			}
		},
		watch:{
			// 每次打开弹框都清掉上一次选中的规格
			checkedSkuId(){
				if(!this.checkedSkuId){
					this.checkID = this.checkedSkuId
				}
			}
		},
		methods: {
			checkedID(e) {
				this.$emit('checkedIds', e)
			},
			minus() {
				if(this.buyNum == 1) return 
				this.buyNum--
			},
			plus() {
				this.buyNum++
			},
			change(id,index) {
				this.checkID = id
				this.checkedID({index:index, item_id: id })
			}
		}
	}
</script>

<style lang="scss" scoped>
    $btn-w-size: 60%;
    $btn-h-size: 4rpx;
    $btn-bg-color: #ffbd86;
    $btn-color: #212121;
    .btn-wrap{
        display: flex;
        width: 42rpx;
        height: 42rpx;
        background: transparent;
        border: 2rpx solid $btn-bg-color;
        border-radius: 15rpx;
        align-items: center;
        justify-content: center;
        position: relative;
        &::after{
            display: block;
            width: $btn-w-size;
            height: $btn-h-size;
            background-color: $btn-color;
            content: '';
            border-radius: 10rpx 10rpx;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        &.btn-cut{
            &::after{
                background-color: $btn-color;
            }
        }
        &.btn-add{
            background-color: $btn-bg-color;
            &::before{
                display: block;
                height: $btn-w-size;
                width: $btn-h-size;
                background-color: $btn-color;
                content: '';
                border-radius: 10rpx 10rpx;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }
        }
    }
	.active {
			color: #fff;
			background-color: $u-main-bg-color;
		}
		.bgc {
			background-color: #f4f4f4;
		}
</style>
